<template>
    <div>
        <br>
        <br>
        <Row type="flex" justify="center">
            <Col span="20">
            <Steps :current="currentStep">
                <Step v-for="step in steps" :title="step.title"></Step>
            </Steps>
            </Col>
        </Row>
        <Row type="flex" justify="center">
            <Col :xs="20" :sm="16" :md="12" :lg="12">
            <br>
            <Card v-if="currentStep==0" class="input-info">
            <Form :ref="steps[currentStep].title" :model="steps[currentStep].info"
                  :rules="steps[currentStep].validate" :label-width="100">
                <FormItem label="邮箱" prop="email">
                    <Input v-model="steps[currentStep].info.email"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="steps[currentStep].info.password"></Input>
                </FormItem>
                <FormItem  label="确认密码" prop="confirmPassword">
                    <Input type="password"  v-model="steps[currentStep].info.confirmPassword"></Input>
                </FormItem>
                <FormItem label="邮箱验证码" prop="emailCode">
                    <Input v-model="steps[currentStep].info.emailCode" style="width: 250px"></Input>
                    <Button  style="float:right;width: 200px" :disabled="steps[currentStep].info.resetSendBtnDis" type="primary"
                             @click="sendEmail">{{steps[currentStep].info.resetSendBtn}}</Button>
                </FormItem>
            </Form>
                <Modal
                        v-model="steps[currentStep].info.captchaCodeModal"
                        :mask-closable="false"
                        title="请输入验证码"
                        :styles="{top: '200px'}"
                >
                    <Row>

                        <Col  span="12">
                        <Input style="width: 200px;margin-left: 40px;" v-model="steps[currentStep].info.captchaCode"></Input>
                        </Col>
                        <Col  span="12">
                        <img @click="refreshCaptcha(this)"
                             :src="'http://47.93.10.18:9001/LongKaoJieKou/portal/captchaimage?d='+captchaSrc" class="captcha-img">点击图片刷新
                        </Col>
                    </Row>
                    <div slot="footer">
                        <Button size="large" @click="qxcaptchaCodeModalClick"  >取消</Button>
                        <Button type="primary" :disabled="steps[currentStep].info.captchaCodeModalOk" size="large" @click="captchaCodeModalClick"  >确定</Button>
                    </div>
                </Modal>
        </Card>

            <!--<Card v-if="currentStep==1" class="input-info" style="text-align: center">
                <Card v-show="steps[currentStep].info.isTrue">
                    <p slot="title" class="card-title">
                        注册成功
                    </p>
                    <div>
                        {{steps[currentStep].info.sendEmail}}邮件发送成功，请登录邮箱进行验证！
                            <p style="margin:10px 0 10px;">
                            <Row type="flex"justify="center">
                                <Col span="6">
                                <Input v-model="steps[currentStep].info.captchaCode"></Input>
                                </Col>
                                <Col span="9">
                                <img @click="refreshCaptcha(this)"
                                     :src="http://47.93.10.18:9001/LongKaoJieKou/portal/captchaimage?d='+captchaSrc" class="captcha-img">点击图片刷新
                                </Col>
                            </Row>
                            </p>

                        <p style="margin: 10px">
                            <Button style="width:200px;" @click="resetSendEmail" :disabled="steps[currentStep].info.resetSendBtnDis" type="primary" >
                                {{steps[currentStep].info.resetSendBtn}}</Button>
                        </p>
                    </div>
                </Card>
                <Card v-show="steps[currentStep].info.isFail" >
                    <p slot="title" class="card-title">
                        认证失败
                    </p>
                    <div>
                        邮箱认证失败，请重新注册！
                        <p style="margin: 10px">

                            <Button style="width:200px;" @click="register" type="primary" >
                                立即注册</Button>

                        </p>
                    </div>
                </Card>
            </Card>-->

            <Card v-if="currentStep==1" class="input-info">

                <Form :ref="steps[currentStep].title" :model="steps[currentStep].info"
                      :rules="steps[currentStep].validate" :label-width="80">

                    <FormItem label="">
                        <RadioGroup v-model="steps[currentStep].info.subjectType" type="button">
                            <Radio label="理科"></Radio>
                            <Radio label="文科"></Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="准考证号" prop="examTicketNo">
                        <Input v-model="steps[currentStep].info.examTicketNo"></Input>
                    </FormItem>
                    <FormItem label="数学" prop="math">
                        <Input v-model="steps[currentStep].info.math"></Input>
                    </FormItem>
                    <FormItem label="外语" prop="foreign">
                        <Input v-model="steps[currentStep].info.foreign"></Input>
                    </FormItem>
                    <FormItem label="综合" prop="comprehensive">
                        <Input v-model="steps[currentStep].info.comprehensive"></Input>
                    </FormItem>
                    <FormItem label="语文" prop="chinese">
                        <Input v-model="steps[currentStep].info.chinese"></Input>
                    </FormItem>
                </Form>


            </Card>
            <Card v-if="currentStep==2" class="input-info" style="text-align: center">

                <Row>
                    <Col span="12">
                    <Card>
                        <p slot="title" >
                            核实注册信息
                        </p>
                        <ul style="text-align: left;">
                            <li style="padding:10px 10px 10px 38px;" >邮箱:<span style="padding-left: 5px;">{{steps[1].info.email}}</span></li>
                            <li style="padding:10px 10px 10px 10px;">文理类型:<span style="padding-left: 5px;">{{steps[1].info.subjectType}}</span></li>
                            <li style="padding:10px 10px 10px 38px;">语文:<span style="padding-left: 5px;">{{steps[1].info.chinese}}</span></li>
                            <li style="padding:10px 10px 10px 38px;">数学:<span style="padding-left: 5px;">{{steps[1].info.math}}</span></li>
                            <li style="padding:10px 10px 10px 38px;">外语:<span style="padding-left: 5px;">{{steps[1].info.foreign}}</span></li>
                            <li style="padding:10px 10px 10px 38px;">综合:<span style="padding-left: 5px;">{{steps[1].info.comprehensive}}</span></li>
                        </ul>
                        <p style="margin-top:18px;">

                        </p>
                    </Card>
                    </Col>
                    <Col span="11" offset="1">
                    <Card >
                        <p slot="title" >
                            扫码支付进行开通
                        </p>
                        <div style="text-align: center;clear: both;">
                        <div style="font-size: 60px;margin-top: 0px;">{{steps[currentStep].info.dnpm}}</div>
                        <p style="font-size: 16px;">段内排名</p>
                        <img src="src/images/qrcode.png">
                        </div>
                    </Card>
                    </Col>
                </Row>
            </Card>

            <Card v-if="currentStep==3" class="input-info">

                <Form :ref="steps[currentStep].title" :model="steps[currentStep].info"
                      :rules="steps[currentStep].validate" :label-width="80">

                    <FormItem label="学校">
                        <Input v-model="steps[currentStep].info.school"></Input>
                    </FormItem>
                    <FormItem label="班级" prop="classNo">
                        <Input v-model="steps[currentStep].info.classNo"></Input>
                    </FormItem>
                    <FormItem label="性别" prop="gender">
                        <Input v-model="steps[currentStep].info.gender"></Input>
                    </FormItem>
                    <FormItem label="联系电话" prop="phone">
                        <Input v-model="steps[currentStep].info.phone"></Input>
                    </FormItem>
                    <FormItem label="考生姓名" prop="studentName">
                        <Input v-model="steps[currentStep].info.studentName"></Input>
                    </FormItem>
                </Form>


            </Card>
            </Col>
        </Row>
        <br>
        <div v-show="nextShow" style="text-align: center">
            <Button :disabled="nextable" style="width: 300px" type="primary" @click="next">{{nextName}}</Button>
        </div>
    </div>
</template>

<script >
    import Cookies from 'js-cookie';
    import {exam} from '../../../../api/index.js';

    export default {
        mounted: function () {
            this.$nextTick(function () {
                var email  = this.$route.params.email;
                var status = this.$route.params.status;
                var student = this.$route.params.student;

                if(status==0){
                    this.currentStep = 1;
                    var info =  this.steps[this.currentStep].info;
                    info.email = email;
                }else if(status==1){
                    this.currentStep = 2;
                    this.steps[1].info.email = email;

                    if(student.wlType=="LK"){
                        this.steps[1].info.subjectType="理科";
                    }else if(student.wlType=="WK"){
                        this.steps[1].info.subjectType="文科";
                    }
                    this.steps[1].info.chinese = student.ywScore;
                    this.steps[1].info.math = student.sxScore;
                    this.steps[1].info.foreign = student.wyScore;
                    this.steps[1].info.comprehensive = student.zhScore;
                    this.steps[1].info.examTicketNo = student.studentCode;
                    this.steps[2].info.dnpm = student.dnPm;
                }
            })
        },
        data() {
            const validatePass = (rule, value, callback) => {

                    if (this.steps[this.currentStep].info.confirmPassword !== '') {
                        // 对第二个密码框单独验证
                        this.$refs[this.steps[this.currentStep].title].validateField("confirmPassword");
                    }
                    callback();

            };
            const validatePassCheck = (rule, value, callback) => {
                 if (value !== this.steps[this.currentStep].info.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                nextName:"下一步",
                nextable: false,
                nextShow:true,
                currentStep: 0,
                steps: [
                    {
                        title: "注册信息",
                        info: {//登录信息
                            email: "",
                            password: "",
                            confirmPassword: "",
                            captchaCode: "",
                            emailCode:"",
                            captchaCodeModal:false,
                            resetSendBtn:"获取邮箱验证码",
                            resetSendBtnDis:false,
                            timeLast:60,
                            captchaCodeModalOk:false
                        },
                        validate: {
                            email: [
                                {required: true, message: '必填', trigger: 'blur'},
                                {type: 'email', message: '格式错误', trigger: 'blur'}
                            ],
                            emailCode: [
                                {required: true, message: '必填', trigger: 'blur'}
                            ],
                            password: [
                                {required: true, message: '必填', trigger: 'blur'},
                                {type:'string',min:6,message:'密码长度不能小于6位',trigger:'blur'},
                                { validator: validatePass, trigger: 'blur' }
                            ],
                            confirmPassword: [
                                {required: true, message: '必填', trigger: 'blur'},
                                {type:'string',min:6,message:'密码长度不能小于6位',trigger:'blur'},
                                { validator: validatePassCheck, trigger: 'blur' }
                            ]
                        }
                    },

                    {
                        title: "分数信息",
                        info: {
                            subjectType: "理科",
                            examTicketNo: "",
                            chinese: "",
                            foreign: "",
                            comprehensive: "",
                            math: "",
                            email:"",
                            userId:""
                        },
                        validate: {
                            examTicketNo: [{required: true, message: '必填', trigger: 'blur'},
                                { type: 'number', message: '请输入正确分数', trigger: 'blur', transform(value) {
                                        return Number(value);
                                    }}

                            ],
                            chinese: [{required: true, message: '必填', trigger: 'blur'},
                                { type: 'number', message: '请输入正确分数', trigger: 'blur', transform(value) {
                                        return Number(value);
                                    }}
                            ],
                            foreign: [{required: true, message: '必填', trigger: 'blur'},
                                { type: 'number', message: '请输入正确分数', trigger: 'blur', transform(value) {
                                        return Number(value);
                                    }}],
                            comprehensive: [{required: true, message: '必填', trigger: 'blur'},
                                { type: 'number', message: '请输入正确分数', trigger: 'blur', transform(value) {
                                        return Number(value);
                                    }}],
                            math: [{required: true, message: '必填', trigger: 'blur'},
                                { type: 'number', message: '请输入正确分数', trigger: 'blur', transform(value) {
                                        return Number(value);
                                    }}],

                        }
                    },
                    {title: "确认支付",info:{dnpm:""}},

                    {title: "个人信息", info: {school: "", classNo: "", gender: "", phone: "", studentName: ""}},
                ],
                captchaSrc: Math.random()
            }
        },
        methods: {
            checkCap() {
                exam.captchaCheck_post({"data": {"captchacode": "123"}}).then((res) => {
                    var errors = [];
                    callback(errors);
                }, function (error) {
                    console.log(error);
                });
            }
            ,
            qxcaptchaCodeModalClick(){
                var info = this.steps[this.currentStep].info;
                info.captchaCodeModal = false;
            },
            captchaCodeModalClick(){
                var info = this.steps[this.currentStep].info;
                if(info.captchaCode==""){
                    this.$Message.error('请输入验证码！');
                }else{
                    info.captchaCodeModalOk = true;
                    //发送email
                    exam.sendEmail_post({"data": {"email": info.email,"password":info.password,"captchaCode":info.captchaCode }}).then((res) => {
                        if(res.data.resCode!=0){
                            this.$Message.error(res.data.resMsg);
                            info.captchaCodeModalOk = false;
                        }else{
                            info.resetSendBtnDis = true;
                            info.timeLast = 60;
                            let timer = setInterval(() => {
                                if (info.timeLast >= 0) {
                                    info.resetSendBtn = info.timeLast + '秒后重试';
                                    info.timeLast -= 1;
                                } else {
                                    clearInterval(timer);
                                    info.resetSendBtn = '重新获取邮箱验证码';
                                    info.resetSendBtnDis = false;
                                }
                            }, 1000);
                            this.$Message.success(info.email+"邮件发送成功，请登录邮箱查看验证码！");
                            info.captchaCodeModal = false;
                        }
                    }, function (error) {
                        alert("系统异常，请先联系管理员");
                    });
                }
            },
            resetSendEmail(){
                var info = this.steps[this.currentStep].info;
                exam.resetSendMail_post({"data": {"email": info.sendEmail,"sendCode":info.sendCode,"endTime":info.sendTime,"sendNum":info.sendNum,"captchacode":info.captchaCode }}).then((res) => {

                    if(res.data.resCode!=0){
                        this.$Message.error(res.data.resMsg);
                    }else{
                        info.sendNum+=1;
                        this.$Message.success(info.sendEmail+"邮件重发成功，请登录邮箱验证！");
                        info.resetSendBtnDis = true;
                        info.timeLast = res.data.data.waitTime;
                        let timer = setInterval(() => {
                            if (info.timeLast >= 0) {
                                info.resetSendBtn = info.timeLast + '秒后重试';
                                info.timeLast -= 1;
                            } else {
                                clearInterval(timer);
                                info.resetSendBtn = '重新发送邮件';
                                info.resetSendBtnDis = false;
                            }
                        }, 1000);
                    }
                }, function (error) {
                    alert("系统异常，请先联系管理员");
                });
            },
            refreshCaptcha(imgObj) {
                this.captchaSrc = Math.random();
            }
            ,
            sendEmail(){
                var info = this.steps[this.currentStep].info;
                this.$refs[this.steps[this.currentStep].title].validateField("email",(valid) => {
                    if(valid==""){
                        this.$refs[this.steps[this.currentStep].title].validateField("password",(validPassowrd) => {
                            if(validPassowrd==""){
                                this.$refs[this.steps[this.currentStep].title].validateField("confirmPassword",(confirmPassword) => {
                                    if(confirmPassword==""){
                                        info.captchaCodeModal = true;
                                        info.captchaCodeModalOk = false;
                                        info.captchaCode = "";
                                        this.refreshCaptcha(this);
                                    }
                                });
                            }
                        });
                    }

                });

            },
            next() {
                var goNext = false;
                if (this.steps[this.currentStep].validate) {
                    this.$refs[this.steps[this.currentStep].title].validate((valid) => {
                        if (valid) {
                            this.nextable = true;
                            switch (this.currentStep) {
                                case 0:
                                    //TODO 这里提交服务端接口
                                    var info =  this.steps[this.currentStep].info;
                                    exam.regist_post({"data": {"email": info.email,"password":info.password,
                                            "emailCode":info.emailCode}}).then((res) => {
                                        if(res.data.resCode!=0){
                                            this.$Message.error(res.data.resMsg);
                                            this.nextable = false;
                                        }else{
                                            this.currentStep += 1;
                                            var info1 =  this.steps[this.currentStep].info;
                                            info1.email = info.email;
                                            this.nextable = false;
                                        }
                                    }, function (error) {
                                        alert("系统异常，请先联系管理员");
                                    });

                                    break;
                                case 1:
                                    this.nextable = false;
                                    //去后台查询判断数据是否真实
                                    var info =  this.steps[this.currentStep].info;
                                    exam.selectStudent_post({"data": {"email":info.email,"studentCode": info.examTicketNo,
                                            "wlType":info.subjectType,"ywScore":info.chinese,"sxScore":info.math,
                                            "wyScore":info.foreign,"zhScore":info.comprehensive}}).then((res) => {
                                        if(res.data.resCode!=0){
                                            this.$Message.error(res.data.resMsg);
                                        }else{
                                            this.currentStep += 1;
                                            var info1 =  this.steps[this.currentStep].info;
                                            info1.dnpm = res.data.data.dnPm;
                                        }
                                    }, function (error) {
                                        alert("系统异常，请先联系管理员");
                                    });
                                    break;
                                case 2:

                                    break;
                                case 3:

                                    break;
                                case 4:
                                    break;
                            }

                        }
                    });
                } else {
                    if(this.currentStep==2){
                        this.nextable = false;
                        //去后台查询判断数据是否真实
                        var info =  this.steps[this.currentStep-1].info;
                        exam.registSuccess_post({"data": {"studentCode": info.examTicketNo,
                                "email":info.email}}).then((res) => {
                            if(res.data.resCode!=0){
                                this.$Message.error(res.data.resMsg);
                            }else{
                                this.$Message.success("操作成功，请完善信息后登录！");
                                this.nextName = "完成";
                                this.currentStep += 1;
                            }
                        }, function (error) {
                            alert("系统异常，请先联系管理员");
                        });
                    }else  if(this.currentStep==3){
                        var info =  this.steps[this.currentStep].info;
                        exam.profileSuccess_post({"data": {"schoolName": info.school,
                                "className":info.classNo,"sex":info.gender,"phone":info.phone,"name":info.studentName,"email":this.steps[1].info.email}}).then((res) => {
                            if(res.data.resCode!=0){
                                this.$Message.error(res.data.resMsg);
                            }else{
                                this.$router.push({
                                    name: 'login'
                                });
                            }
                        }, function (error) {
                            alert("系统异常，请先联系管理员");
                        });
                    }
                }


            },
            register(){
                this.currentStep = 0;
                this.nextShow = true;
                this.$router.push({
                    name: 'portal_regist'
                });
            }
        }
    }

</script>

<style scoped>
    .input-info {
        width: 600px;
    }

    .captcha-img {
        height: 35px;
    }
    .next-hidden{
        display: none;
    }
</style>
